<template>
  <!-- 机构信息页面的容器 -->
  <div class="header_information page-container">
    <!-- 头部 -->
    <el-row class="header_name">
      <el-col :span="24" class="header_text">
        <h1>单位信息</h1>
      </el-col>
      <el-col :span="24">
        <div class="header_line"></div>
      </el-col>
    </el-row>
    <!-- 根据审核状态显示不同的提示信息 -->
    <div class="el_alert">
      <el-alert
        title="恭喜，您的学校认证信息已经通过审核！"
        type="success"
        v-if="i_data.auditStatus == 1"
      />
      <el-alert
        title="您的学校认证信息待审中"
        type="warning"
        v-if="i_data.auditStatus == 0"
      />
      <el-alert
        title="您的学校认证信息审核拒绝，可修改信息后点击重新提交按钮，再次提交审核。"
        type="error"
        :closable="false"
        v-if="i_data.auditStatus == 2"
      />
    </div>
    <!-- 表格内容区域 -->
    <el-row>
      <!-- 组委会信息 -->
      <el-col :span="24">
        <h3 class="contnet_text">学校信息</h3>
        <!-- 学校信息表单 -->
        <el-form
          label-width="100px"
          v-if="i_data"
          ref="i_data_ref"
          :model="i_data"
          :rules="i_data_rules"
        >
          <el-form-item label="学校 ID">
            <span class="not_inp">{{ i_data.userId }}</span>
            <!-- 显示数据 -->
          </el-form-item>

          <el-form-item label="单位名称" prop="name">
            <el-input
              v-model="i_data.name"
              placeholder="请填写单位名称"
              class="content_input"
              :disabled="i_data.auditStatus == 0"
              v-model.trim="inputValueTrim"
            />
          </el-form-item>
          <el-form-item label="学校性质">
            <div class="select_region">
              <el-select
                placeholder="请选择单位性质"
                clearable
                class="content_select"
                disabled
                v-model="i_data.schoolNature"
              >
                <el-option
                  v-for="item in type_data"
                  :key="item.value"
                  :value="item.value"
                  :label="item.label"
                ></el-option>
              </el-select>
            </div>
          </el-form-item>

          <el-form-item label="所在地区" prop="county">
            <div class="select_region">
              <ProvinceSelect
                v-model:economize="i_data.economize"
                v-model:market="i_data.market"
                v-model:county="i_data.county"
                :showCounty="true"
                :disabled="i_data.auditStatus != 2"
              />
            </div>
          </el-form-item>

          <div class="select_region">
            <el-form-item label="邮寄地址" prop="address">
              <el-input
                v-model="i_data.address"
                placeholder="请填写机构邮寄地址"
                class="content_input"
                v-model.trim="inputValueTrim"
                :disabled="i_data.auditStatus == 0"
              />
            </el-form-item>
          </div>
          <!-- TODO 信息闭环 -->
          <el-form-item label="执照类型">
            <div class="select_region">
              <el-select
                :value="i_data.licenseType"
                placeholder="请选择执照类型"
                clearable
                class="content_select"
                disabled
                ><el-option
                  v-for="item in license_type_options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </div>
          </el-form-item>
          <div class="select_region" v-if="false">
            <el-form-item label="执照号码">
              <el-input
                placeholder="请输入单位执照号码"
                class="content_input"
                disabled
                :value="i_data.licenseNumber"
              />
            </el-form-item>
          </div>
          <div class="select_region">
            <!-- 查询上级 -->
            <el-form-item label="上级管理单位">
              <div class="el_form_content_text">
                <div class="content_text_relation"></div>
                <div class="content_text_relation">
                  <span class="content_text_contacts">联系人: </span><i></i>
                  <span>{{ p_data.name }}</span>
                </div>
                <div class="content_text_relation">
                  <span class="content_text_contacts">联系邮箱: </span><i></i>
                  <span>{{ p_data.email }}</span>
                </div>
                <div class="content_text_relation">
                  <span class="content_text_contacts">联系电话: </span
                  ><span>{{ p_data.phone }}</span>
                </div>
              </div>
            </el-form-item>
          </div>
        </el-form>
      </el-col>
      <!-- 联系方式 -->
      <el-col :span="24">
        <h3 class="contnet_text">学校负责人信息</h3>
        <el-form
          label-width="100px"
          :model="i_data"
          :rules="head_data_rules"
          ref="head_data_ref"
        >
          <el-form-item label="负责人姓名">
            <el-input
              placeholder="请输入负责人姓名"
              class="content_input"
              disabled
              :value="i_data.headName"
            />
          </el-form-item>

          <el-form-item label="手机号码">
            <el-input
              placeholder="请输入单位负责人手机号码"
              class="content_input"
              disabled
              :value="i_data.headPhone"
            />
          </el-form-item>

          <el-form-item label="联系邮箱" prop="headEmail">
            <el-input
              placeholder="请输入单位负责人联系邮箱"
              class="content_input"
              :disabled="i_data.auditStatus == 0"
              v-model="i_data.headEmail"
            />
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              size="large"
              @click="handleSaveInformationForInstitution"
              v-if="i_data.auditStatus == 2"
              color="#1964d6"
              >重新提交</el-button
            >
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              size="large"
              @click="handleSaveInformationForInstitution"
              v-if="i_data.auditStatus == 1"
              color="#1964d6"
              >保存信息</el-button
            >
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script  setup>
import { ref, onMounted } from "vue"; // 导入Vue的响应式引用和生命周期钩子
import { useUserStore } from "@/store/user"; // 导入用户状态管理
import { getManagerApi } from "@/api/common"; // 导入获取管理者信息的API函数
import ProvinceSelect from "@/components/province-select/index.vue"; // 导入省份选择组件
import { SaveInformationForInstitutionApi } from "@/api/manage/institution"; // 导入保存机构信息的API函数
import { ElMessage } from "element-plus"; // 导入Element Plus的消息提示组件

// 定义学校性质的选项
const type_data = [
  {
    label: "学校",
    value: "school",
  },
  {
    label: "机构",
    value: "institution",
  },
  {
    label: "团队",
    value: "team",
  },
  {
    label: "其他",
    value: "other",
  },
];
const license_type_options = [
  {
    label: "团队",
    value: "team",
  },
  {
    label: "其他",
    value: "other",
  },
];
const userStore = useUserStore(); // 使用用户状态管理
// 定义存储上级管理单位信息的响应式引用
const p_data = ref({});
// 定义存储机构信息的响应式引用
const i_data = ref({});
/**
 * 获取管理者信息的函数
 * @returns {Promise<void>}
 */
const handleGetManager = async () => {
  if (!userStore.info_data) {
    return;
  }
  let res = await getManagerApi(userStore.info_data.p_id);
  if (res.success) {
    p_data.value = res.entity;
  }
  i_data.value = JSON.parse(JSON.stringify(userStore.info_data));
};

/**
 * 保存机构信息的函数
 * @returns {Promise<void>}
 */
const handleSaveInformationForInstitution = async () => {
  // 表单验证
  i_data_ref.value.validate(async (v) => {
    if (!v) {
      return;
    }
    head_data_ref.value.validate(async (v2) => {
      if (!v2) {
        return;
      }
      let res = await SaveInformationForInstitutionApi({
        userId: i_data.value.userId,
        name: i_data.value.name,
        economize: i_data.value.economize,
        market: i_data.value.market,
        county: i_data.value.county,
        address: i_data.value.address,
        headEmail: i_data.value.headEmail,
      });
      if (res.success) {
        ElMessage.success(res.message);
        if (i_data.value.auditStatus == 2) {
          i_data.value.auditStatus = 0;
        }
      } else {
        ElMessage.error(res.message);
      }
    });
  });
};

// 定义表单验证规则
const i_data_ref = ref();
const i_data_rules = ref({
  name: [
    {
      type: "string",
      required: true,
      message: "请输入单位名称",
      trigger: "blur",
    },
  ],
  county: [
    {
      required: true,
      message: "请选择所在地区",
      trigger: "blur",
    },
  ],
  address: [
    {
      type: "string",
      required: true,
      message: "请输入地址",
      trigger: "blur",
    },
  ],
});

const head_data_ref = ref();
const head_data_rules = ref({
  headEmail: [
    {
      type: "string",
      required: true,
      message: "请输入联系邮箱",
      trigger: "blur",
    },
    {
      validator: (rule, value, callback) => {
        // 使用正则表达式验证邮箱格式
        const emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
        if (emailPattern.test(value)) {
          // 邮箱格式合法，通过校验
          callback();
        } else {
          // 邮箱格式不合法，校验失败，显示提示信息
          callback(new Error("联系邮箱格式不正确"));
        }
      },
      trigger: "blur",
    },
  ],
});
// 组件挂载后执行的操作
onMounted(async () => {
  await userStore.handleGetInformation();
  handleGetManager();
});
</script>

<style lang="scss" scoped>
.header_information {
  .header_name {
    margin-left: 10px;
    margin-right: 10px;

    .header_text {
      margin-left: -10px;
      margin-right: -10px;
    }

    h1 {
      font-size: 28px;
    }
  }

  .el_alert {
    margin-bottom: 20px;
  }

  .header_line {
    display: block;
    height: 1px;
    width: 100%;
    margin: 24px 0;
    background-color: #8473f717;
  }

  .contnet_text {
    margin-bottom: 14px;
    font-size: 20px;
    font-weight: 700;
  }

  .not_inp {
    color: #606266;
    font-size: 14px;
  }

  .content_input {
    width: 500px;
  }

  .input_border {
    display: none;
  }

  :deep(.el-input__wrapper) {
    padding: 0 15px;
  }

  :deep(.el-input.is-disabled) .el-input__inner {
    background-color: #f5f5f5;
  }

  .select_region {
    width: 500px;
    display: flex;
    justify-content: space-between;

    .el_form_content_text {
      width: 500px;
      height: 120px;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;

      p {
        font-size: 14px;
        color: #202020;
      }

      .content_text_relation {
        font-size: 14px;

        .content_text_contacts {
          color: #000;
          font-weight: bold;
        }

        span {
          color: #202020;
          font-size: 14px;
        }
      }
    }
  }

  :deep(.el-input) {
    height: 40px;
  }

  .content_select {
    width: 160px;
  }
  /* 使el-space组件的每个子元素都等分父容器的宽度 */
  :deep .el-space__item {
    flex: 1;
  }
}
</style>